<!doctype html>
<!--确认兑换方案页面-->
<html>

<head>
  <meta charset="UTF-8">
  <title>礼品换积分</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <style>
    html {
      font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      height: 100%;
      background-color: #F4F4F4; !important;

      overflow: auto;
    }

    body {
      overflow-x: hidden;
      height: 100%;
    }
    p{
      margin: 0;
      color:black;
    }

    .title{
      width: 100%;
      overflow: hidden;
      padding: 0.4rem 0 ;
      border-bottom: 1px solid #CACACA;
    }

    .title div{
      float: left;
    }
    .title div:first-child{
      margin-right: 0.3rem;
      margin-left: 0.3rem;
    }

    .title img{
      width: 1.6rem;
    }
    .headerName{
      width: 100%;
      text-align: center;
      padding: 0.2rem 0 ;
    }

    .userID{
      width: 100%;
      text-align: center;
    }
    .step{
      padding: 0.2rem 0;
    }
    .search-box{
      width: 80%;
      margin: 0 auto;
    }

    .search-btn {
      color: white;
      background: rgb(255,152,0);
      height: 1rem;
      width: 80%;
      margin: 0.5rem auto 0;
      /*padding: 0.15rem 0 ;*/
      font-size: 0.3rem;
      line-height: 1rem;
      border-radius: 0.2rem;
    }
    /*fixed by 黄鹍*/
    .programmeList{
      width: 100%;
    }
    .programme{
      margin-bottom: 0.2rem;
      background-color: white;
    }
    .programmeTitle{
      width: 100%;
      border-bottom: 1px solid #CACACA;
      font-size: 0.24rem;
      overflow: hidden;
      height: 0.4rem;
    }
    .programmeTitle .programmeTitleLeft{
      width: 60%;
      float: left;
      height: 99%;
      padding-left: 0.2rem;
    }
    .programmeTitle .programmeTitleright{
      float: right;
      width: 30%;
      height: 99%;
      /*background: orange;*/
      overflow: hidden;
      padding-top:0.045rem;
    }
    .programmeTitleright .countBtn{
      padding: 0;
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      border: 1px solid rgb(217,217,217);
      color:rgb(217,217,217) ;
      font-size: 0.28rem;
      text-align: center;
      float: left;
      line-height: 0.3rem;
    }
    .programmeTitleright .showProCount{
      padding: 0;
      display: inline-block;
      width: 1rem;
      height: 0.3rem;
      line-height: 0.3rem;
      border: none;
      font-size: 0.2rem;
      border: 1px solid rgb(187,187,187);
      margin: 0 0.1rem;
      text-align: center;
      float: left;
    }
    .giftList{
      overflow: hidden;

    }
    .giftList>div{
      padding: 0.1rem 0 0;
      overflow: hidden;
      margin-bottom: 0.1rem;
    }
    .giftImg{
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 0.3rem;
      overflow: hidden;
      margin-left: 0.3rem;
      float: left;
    }
    .giftImg img{
      width: 0.6rem;
    }
    .giftName{
      width: 5.2rem;
      float: left;
      height: 0.6rem;
      line-height: 0.6rem;
      margin-left: 0.3rem;
      border-bottom: 1px solid #CACACA;
    }
    .showIntegral{
      width: 100%;
      padding:0.1rem  0.2rem ;
      overflow: hidden;
    }
    .showIntegral .singleIntegral{
      float: left;
      color: #adadad;
    }
    .showIntegral .totalIntegral{
      float: right;
    }


  </style>
</head>

<body>
<div class="mui-content" id="app" style="position: relative">
  <div class="title">
    <div>
      <img :src="config.imgPath + classInfo.icon" alt="">
    </div>
    <div>
      <p> <strong>{{classInfo.name}}</strong> </p>
      <p>{{new Date(classInfo.startTime).format('yyyy.MM.dd')}} - {{new Date(classInfo.endTime).format('yyyy.MM.dd')}} </p>
      <p style="font-size: 0.2rem;color: rgb(232,131,95)">合计积分：{{totalIntergral}}积分</p>
    </div>
  </div>

  <div class="programmeList">
    <div v-for="(item,index) in checkedProData" class="programme"  >
      <div class="programmeTitle">
        <p class="programmeTitleLeft">{{item.proData.name}}</p>
        <div class="programmeTitleright" >
          <button class="countBtn" @click="delCount(index)">-</button>
          <input type="number" class="showProCount" @blur="inputBlur(index)" :value="item.count">
          <button class="countBtn" @click="addCount(index)">+</button>
        </div>
      </div>

      <div class="giftList" v-for="(item1,index1) in item.proData.groupProp">
        <div>
          <div class="giftImg">
            <img :src="config.imgPath + item1.icon" alt="">
          </div>
          <p class="giftName">{{item1.name}}X{{item1.propQuantity}}</p>
        </div>
      </div>
      <p class="showIntegral">
        <span class="singleIntegral">价值：{{item.proData.ticket}}积分</span>
        <span class="totalIntegral">共获得：{{item.proData.ticket*item.count}}积分</span>
      </p>
    </div>

  </div>
  <!--输入会员ID  或者扫码  -->
  <div class="mui-content userID" style="padding-bottom: 0.8rem">
    <p class="step">第三步：输入会员ID</p>
    <!--<div class="search-box">-->
      <!--<div class="mui-input-row mui-search">-->
        <!--<input v-model="userId" type="search" class="mui-input-clear search-id"  placeholder="">-->
      <!--</div>-->
    <!--</div>-->
    <div class="search-box"   >
        <input id="mess" v-model="userID" class="mui-input-clear"  type="search" placeholder="请输入会员ID">
    </div>
    <p class="step">扫描会员二维码</p>
    <div class="img-box" >
      <img @click="openBarCode" src="../../images/qr_code.png" alt="" />
    </div>
    <div  @click="search" class="flex-item search-btn vux-1px-l" >
      下一步
    </div>
  </div>




</div>
<script src="../../js/mui.min.js"></script>
<script src="../../config.js"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var vm = new Vue({
    el: '#app',
    data: {
      ifShow: true,
      currentShopObj: {},
      userID:'',//会员ID
      programmeInfo:'',//选择的方案info
      classInfo:'',
      checkedProData:[],
      totalIntergral:0,
    },
    created: function() {
      mui.init()
      mui.plusReady(function() {
        vm.receiveParams()
      })
    },
    methods: {
      receiveParams: function() {
        var self = plus.webview.currentWebview()
        this.currentShopObj = self.currentShopObj;
        this.programmeInfo=self.programmeInfo
        this.checkedProData=self.checkedProData
        this.classInfo=self.classInfo;
        this.totalIntergral=0;
        for(var i=0;i<this.checkedProData.length;i++){
          this.totalIntergral+=parseInt(this.checkedProData[i].count)*this.checkedProData[i].proData.ticket;
        }
        console.log('checkedProData'+JSON.stringify(this.checkedProData))
      },
      openBarCode:function(){
        var  vm=this;
        mui.openWindow({
          url: '../../common/barcode.html',
          id: 'barcode',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置
            titleNView: {
              titleText: '扫码',
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            currentShopObj: vm.currentShopObj,
            classInfo: this.classInfo, //最上面的类的信息
            programmeInfo: this.programmeInfo, //方案信息
            type: 6,
            checkedProData:vm.checkedProData,
          }
        })
      },
      inputBlur:function(index){
        var showProcount=document.getElementsByClassName('showProCount')[index];
        var vm=this;
        if(!showProcount.value){
          showProcount.value=1;
        }
        vm.checkedProData[index].count=showProcount.value;
        vm.totalIntergral=0;
        for(var i=0;i<this.checkedProData.length;i++){
          vm.totalIntergral+=parseInt(vm.checkedProData[i].count)*vm.checkedProData[i].proData.ticket;
        }
      },
      delCount:function(index){
        var showProcount=document.getElementsByClassName('showProCount')[index];
        if(showProcount.value>1){
          showProcount.value--;
        }
        var vm=this;
        vm.checkedProData[index].count=showProcount.value;
        console.log('数目'+vm.checkedProData[index].count);
        vm.totalIntergral=0;
        for(var i=0;i<this.checkedProData.length;i++){
          vm.totalIntergral+=parseInt(vm.checkedProData[i].count)*vm.checkedProData[i].proData.ticket;
        }
      },
      addCount:function(index){
        var showProcount=document.getElementsByClassName('showProCount')[index];
        showProcount.value++;
        var vm=this;
        vm.checkedProData[index].count=showProcount.value;
        vm.totalIntergral=0;
        for(var i=0;i<this.checkedProData.length;i++){
          vm.totalIntergral+=parseInt(vm.checkedProData[i].count)*vm.checkedProData[i].proData.ticket;
        }
      },
      toAddPage:function(userInfo){
        // console.log(JSON.stringify(userInfo));
        console.log('checkedProData'+JSON.stringify(vm.checkedProData));
        mui.openWindow({
          url: './addIntegral.html',
          id: 'addIntegral',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置
            titleNView: {
              titleText: '卡片存积分',
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            currentShopObj: this.currentShopObj,
            userInfo: userInfo,
            classInfo: this.classInfo,
            checkedProData:vm.checkedProData,
            programmeInfo: this.programmeInfo, //方案信息
          }
        })
      },
      search:function(){
        var  vm=this;
        if(vm.userID!==''){
          config.ajax({
            url: '/redemption/checkVip',
            data: {
              userId: vm.userID
            },
            success: function(res) {
              if(res.result === 1) {
                vm.toAddPage(res)
              } else {
                mui.toast(res.errormsg)
              }
            },
            error:function(res){
              mui.toast(res.errormsg)
            }
          })
        }else{
          mui.toast('请输入会员ID')
        }

      },
    }
  })
</script>
</body>

</html>